<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no" />
    <title></title>
    <link href="./assets/css/app.css" rel="stylesheet">

    <script type="text/javascript">
        window.require = {
            config: {
                site: {
                    name: "pageEditor",
                    cdnurl: ".\/",
                    version: new Date().getTime(),
                },
                actionname: "preview",
                jsname: "app\/test",
            }
        };
    </script>
    <style>
        body {
            min-width: auto !important;
        }
    </style>
</head>
<body>
<div id="preview"></div>

<!--js入口文件-->
<script src="./assets/js/require.js" data-main="./assets/js/require-app.js"></script>
</body>
</html>

<script type="text/html" id="tpl_show_title">
    <div class="fui-title"
         style="background: {{style.background}}; color: {{style.color}}; font-size: {{style.fontSize}}px; text-align: {{style.textAlign}}; padding: {{style.paddingTop}}px {{style.paddingLeft}}px;">
        {{if params.icon}}
        <i class="icon {{params.icon}}"></i>
        {{/if}}
        {{if params.link}}
        <a href="{{params.link}" style="color: {{style.color||''}}">{{params.title||'请输入标题内容'}}</a>
        {{else}}
        {{params.title||'请输入标题内容'}}
        {{/if}}
    </div>
</script>

<script type="text/html" id="tpl_show_blank">
    <div style="height: {{style.height}}px; background: {{style.background}}"></div>
</script>

<script type="text/html" id="tpl_show_search">
    <div class="diy-search {{style.searchStyle}}"
         style="background: {{style.background}}; padding: {{style.paddingTop||'10'}}px {{style.paddingLeft||'10'}}px;">
        <div class="inner left" style="background: {{style.inputBackground||'#fff'}};">
            <div class="search-icon" style="color: {{style.iconColor}};"><i class="icon icon-search"></i>
            </div>
            <div class="search-input" style="text-align: {{style.textAlign}}; color: {{style.color}};">
                <span>{{params.placeholder}}</span>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="tpl_show_line">
    <div class="fui-line-diy" style="background: {{style.background}}; padding: {{style.padding}}px 0;">
        <div class="line"
             style="border-top: {{style.height||'2'}}px {{style.lineStyle||'solid'}} {{style.borderColor||'#000000'}};"></div>
    </div>
</script>

<script type="text/html" id="tpl_show_banner">
    <div class="swiper-container" id="banner-{{itemid}}" data-swiper='{"loop": true, "autoplay": true, "pagination":{"el":"#banner-{{itemid}} .swiper-pagination"} }'>
        <div class="swiper-wrapper">
            {{each data as item}}
            <div class="swiper-slide">
                <a href="{{item.linkUrl}}">
                    <img class="" src="{{item.imgUrl}}" style="width: 100%;"/>
                </a>
            </div>
            {{/each}}
        </div>
        <div class="swiper-pagination"
             style="text-align:{{style.dotAlign}}; padding: 0 {{style.leftRight||'10'}}px; bottom: {{style.bottom||'10'}}px; opacity: {{style.opacity||'0.8'}};"
             data-bullet-style="
                background:{{style.background}};
                margin:0 2px;
                width:{{style.dotStyle == 'rectangle' ? '20px' : '12px'}};
                height:12px;
                border-radius: {{style.dotStyle == 'round' ? '100%' : '0'}};
            "></div>
    </div>
</script>

<script type="text/html" id="tpl_show_picturew">
    <div class="drag" data-itemid="{{itemid}}">
        {{if params.column == 1}}
            {{data=arrayChunk(data, 4)}}
            {{each data as item index}}
            <div class="d-flex" style="background: {{style.background?style.background:'#000'}};">
                <div style="padding: {{index == 0 ? style.paddingtop : 0}}px {{style.paddingleft}}px {{style.paddingtop}}px;flex: 0 0 {{ item.length>1 ? 50 : 100;}}%;width: {{ item.length>1 ? 50 : 100;}}%;">
                    <a href="{{item[0].imglink}}">
                        <img class="img-fluid" src="{{item[0].imgurl}}" style="width: 100%; height: 100%">
                    </a>
                </div>
                {{if item.length > 1}}
                <div style="padding: {{index == 0 ? style.paddingtop : 0}}px {{style.paddingleft}}px {{style.paddingtop}}px 0;flex: 0 0 50%;width: 50%;">
                    <div class="d-flex" style="padding: 0 0 {{ item.length == 2 ? 0 : style.paddingleft/2}}px 0;flex-wrap:nowrap;">
                        <div style="width: 100%;">
                            <a href="{{item[1].imglink}}">
                                <img class="img-fluid" src="{{item[1].imgurl}}" style="width: 100%;">
                            </a>
                        </div>
                    </div>
                    {{if item.length > 2}}
                    <div class="d-flex" style="padding: {{style.paddingleft/2}}px 0 0 0;flex-wrap:nowrap;">
                        <div style="padding: 0 {{style.paddingleft/2}}px 0 0;width: 100%;">
                            <a href="{{item[2].imglink}}">
                                <img class="img-fluid" src="{{item[2].imgurl}}" style="width: 100%;">
                            </a>
                        </div>
                        {{if item.length > 3}}
                        <div style="padding: 0 0 0 {{style.paddingleft/2}}px;width: 100%;">
                            <a href="{{item[3].imglink}}">
                                <img class="img-fluid" src="{{item[3].imgurl}}" style="width: 100%;">
                            </a>
                        </div>
                        {{/if}}
                    </div>
                    {{/if}}
                </div>
                {{/if}}
            </div>
            {{/each}}
        {{else if params.showtype == 0}}
        <div class="fui-picturew row-{{params.column}} d-flex swiper-slide" style="padding: {{style.paddingtop}}px; {{style.paddingleft}}px; background:  {{style.background?style.background:'#000'}};">
            {{each data as item}}
            <div class="item" style="padding: {{style.paddingtop}}px {{style.paddingleft}}px;flex: 0 0 {{100/params.column}}%;">
                <img class="img-fluid" src="{{item.imgurl}}" style="width: 100%;">
            </div>
            {{/each}}
        </div>
        {{else}}
        <div class="swiper-container" id="picturew-{{itemid}}" data-swiper='{"pagination":{"el":"#picturew-{{itemid}} .swiper-pagination"} }'>
            <div class="swiper-wrapper">
                {{data=arrayChunk(data, params.column*params.rownum)}}
                {{each data as items}}
                <div class="fui-picturew row-{{params.column}} d-flex swiper-slide" style="padding: {{style.paddingtop}}px; {{style.paddingleft}}px; background:  {{style.background?style.background:'#000'}};">
                    {{each items as item}}
                    <div class="item" style="padding: {{style.paddingtop}}px {{style.paddingleft}}px;flex: 0 0 {{100/params.column}}%;">
                        <img class="img-fluid" src="{{item.imgurl}}" style="width: 100%;">
                    </div>
                    {{/each}}
                </div>
                {{/each}}
            </div>
            {{if style.showbtn == 1}}
            <div class="swiper-pagination"
                 style="text-align:{{style.dotAlign}}; padding: 0 {{style.leftRight||'10'}}px; bottom: {{style.bottom||'10'}}px; opacity: {{style.opacity||'0.8'}};"
                 data-bullet-style="
                background:{{style.background}};
                margin:0 2px;
                width:{{style.dotStyle == 'rectangle' ? '18px' : '6px'}};
                height:6px;
                border-radius: {{style.dotStyle == 'round' ? '100%' : '0'}};
            "></div>
            {{/if}}
        </div>
        {{/if}}
    </div>
</script>


<script type="text/html" id="tpl_show_picgroup">
    <div class="drag" data-itemid="{{itemid}}">
        {{if params.column == 1}}
        {{each data as item index}}
        <div class="d-flex" style="background: {{style.background?style.background:'#000'}};">
            <div style="padding: {{style.paddingtop}}px {{style.paddingleft}}px;flex: 0 0 100%;width: 100%;">
                <a href="{{item.imglink}}">
                    <img class="img-fluid" src="{{item.imgurl}}" style="width: 100%; height: 100%">
                </a>
            </div>
        </div>
        {{/each}}
        {{else}}
        {{/if}}
    </div>
</script>